<!-- 项目审批 -->
<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">新增移库单</block></cu-custom>
	
	<view>

			<form @submit="onSubmit">
				<view class="cu-form-group">
					<view class="title xrequired">客户</view>
					<input :class="!item.client.name ? 'xrwaning' : ''" v-model="item.client.name" name="input" @focus="selectGoods()" disabled="disabled"></input>
					<button class="cu-btn block bg-blue margin-tb-sm lg" type="" @tap="selectGoods">选择客户</button>
				</view>
				<view class="cu-form-group">
					<view class="title">受理员</view>
					<input v-model="item.oper" name="input" disabled="disabled"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">保管员</view>
					<input v-model="item.tallyClerk" name="input" disabled="disabled"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">备注</view>
					<input v-model="item.remark" name="input"></input>
				</view>
				<view>
					<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg" :disabled="loading" type="">
						<text :class="loading ? 'cuIcon-loading2 cuIconfont-spin' : ''"></text>保存</button>
				</view>
			</form>

	</view>
	
	<!-- <view class="cu-modal" :class="isShowClientDialog ? 'show' : ''">
		<view class="cu-dialog" :style="{ marginTop: customBarH+'px' }">
			<view class="cu-bar bg-white justify-end">
				<view class="content">选择客户</view>
				<view class="action" @tap="hideClientDialogModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view :style="{height: winHeight+'px'}">
				<select-client
				    ref="goodsClientRef"
					:tableHeight="580"
					:windowWidth="windowWidth"
					:padding="padding"
					@selected="selectedClient" />
			</view>
		</view>
	</view> -->
	
	<view class="cu-modal" :class="isShowGoodsDialog ? 'show' : ''">
		<view class="cu-dialog" :style="{ marginTop: customBarH+'px' }">
			<view class="cu-bar bg-white justify-end">
				<view class="content">选择货物</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view :style="{height: winHeight+'px'}">
				<select-goods
					ref="goodsRef"
					:tableHeight="580"
					:windowWidth="windowWidth"
					:padding="padding"
					:clientId="0"
					@selected="selectedClick" />
			</view>
		</view>
	</view>
	
	</view>
	
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import selectClient from './selectClient.vue'
	import selectGoods from './selectGoods.vue'

	import { mapGetters } from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		components: {
			uniTag,
			uniIcons,
			selectClient,
			selectGoods
		},
		computed: mapGetters(['user']),
		data() {
			return {
				id: 0,
				item: { client:{name:''} },
				isShowClientDialog: false,
				isShowGoodsDialog: false,
				loading: false,
				customBarH:this.CustomBar+20,
				winHeight:0,
				windowWidth:0,
				padding:0,
				goods:{}
			}
		},
		onLoad(options) {
			this.item.oper=this.user.name
			this.item.tallyClerk=this.user.name
			
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = (res.windowHeight-this.customBarH)*0.75
					this.windowWidth = res.windowWidth * 0.15
					this.padding = res.windowWidth / 750 * 20
				}
			})

			this.id = options.id

			if (this.id >0 && this.id > 0) {
				this.$minApi.goodsPosiChngBill(this.id).then(res => {
					const data = res
					if (data) {
						if (detail) {
							this.item = data
						}
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
				})
			} else {
				uni.setNavigationBarTitle({
				title: '新增移库单'
				})
			}
						
			this.$minApi.getWorkGroups().then(res => {
				const data = res
				if (data) {
					this.workGroupOptions =	data.map(a => a.name)
				}
			}).catch(err => {
				console.log(err)
			}).finally(() => {
				this.isLoading = false
			})
			
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			onSubmit(e) { 
				
				if(!this.item.client.name) {
					uni.showToast({
						icon: 'none',
					    title: '必填项未填写',
					    duration: 2000
					})
					return
				}
				
				this.loading = true
				const _this = this
				
				const data = {
					clientID:this.item.clientID,
					oper:this.item.oper,
					tallyClerk:this.item.tallyClerk,
					remark:this.item.remark,
					status:'已提交',
					goodsPosiChngDetails:[{
						inStockGoodsDetailID: this.goods.id, 
						goodsPosiOrg: this.goods.goodsPosi,
						qtyOriginal: this.goods.qty,
						qtyAvailable: this.goods.qty,
						weightOriginal: this.goods.weight,
						weightAvailable: this.goods.weight,
						goodsPosiNew: this.goods.goodsPosi,
						workGroup: '保管班'						
					}]
				}
					
					_this.$minApi.createGoodsPosiChngBill(data).then(res => {
						uni.showToast({
						    title: '新增移库单成功',
						    duration: 2000
						})
						
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/todo/index?currentTab=2&currId=${res.id}`
							})
						}, 2000)
				
					}).catch(err => {
						uni.showToast({
							icon: 'none',
						    title: '新增移库单失败',
						    duration: 2000
						})
					}).finally(() => {
						this.loading = false
					})
		
				
			},
			selectClients() {
				this.isShowClientDialog = true
			},
			hideClientDialogModal() {
				//
				this.isShowClientDialog=false
			},
			selectedClient(val) {
				//
				this.isShowClientDialog=false
				this.id=val.id
				this.item.client.name=val.name
				this.item.clientID=val.id				
			},			
			backedPage() {
				uni.redirectTo({
					url: `/pages/todo/index?currentTab=2`
				})
			},
			hideModal(e) {
				this.isShowGoodsDialog = false
			},
			selectGoods() {	
				this.isShowGoodsDialog = true
			},
			selectedGoods(val) {
				this.isShowGoodsDialog = false
				
				
			},
			selectedClick(val) {
			
				this.isShowGoodsDialog = false					
				this.goods=val
				this.item.client.name=val.clientName
				this.item.clientID=val.clientID		
			}
		}
	}
</script>

<style scoped>
.xrequired::after  {
		content: '*';
		color: red;
	}
	.xrwaning{
		border: 1px solid #FF0000;
	}
</style>
